<template>
  <div>
    <h2>ShowInfo: {{ info }} </h2>
    <!-- 违背规范,单项数据流 -->
    <!-- <button @click="info.name='inzv520'">showinfo-修改</button> -->
    <!-- 正确写法 -->
    <button @click="modify">showinfo-修改</button>
    <hr>
    <!-- readonly -->
    <h2>ShowInfo: {{ roInfo }} </h2>
    <button @click="roInfoClick">showinfo-修改</button>

  </div>
</template>
<script>
import { reactive, ref } from "vue";
export default {
    props:{
        info:{
            type:Object,
            default:()=>{

            }
        },
        roInfo:{
          type: Object,
          default:()=>{}
        }
    },
    emits:['changeInfo','changeroInfoname'],
  setup(props,context) {
   const modify = ()=>{
    context.emit('changeInfo',{name:'inzv520',age:18,height:199})
   }
   const roInfoClick = ()=>{
    context.emit('changeroInfoname',"jack")
   }
    return {
      modify,
      roInfoClick
    };
  },
};
</script>
<style scoped>
/*局部css 支持css3 可以改变elementUI组件的样式 且组件样式调整只在本页面生效**/
/*主样式*/
</style>
